<template>
	<view class="user-center">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-avatar">
				<image :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
				<view class="edit-avatar" @click="changeAvatar">
					<uni-icons type="camera" size="20" color="#fff"></uni-icons>
				</view>
			</view>
			<view class="user-info">
				<text class="username" @click="gotoLogin()">{{ userInfo.username || '登录/注册' }}</text>
			</view>
			<view class="settings-btn" @click="navigateTo('/pages/user/settings')">
				<uni-icons type="gear" size="24" color="#666"></uni-icons>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-list">
			<view class="menu-item" v-for="item in menuList" :key="item.path" @click="navigateTo(item.path)">
				<view class="menu-left">
					<uni-icons :type="item.icon" size="20" :color="item.color"></uni-icons>
					<text class="menu-text">{{ item.title }}</text>
				</view>
				<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<view class="logout-btn" v-if="isLogin" @click="handleLogout">
			<text>退出登录</text>
		</view>
	</view>
</template>
<script>
	import {uniIcons} from '@/components/uni-icons/uniicons_file_vue.js'
	import {mapState,mapActions} from 'vuex' //引入mapState
	export default {
		data() {
			return {
				menuList: [{
						title: '我的订单',
						icon: 'cart',
						color: '#ff9900',
						path: '/pages/order/list'
					},
					{
						title: '我的收藏',
						icon: 'star',
						color: '#ff5a5f',
						path: '/pages/favorite/list'
					},
					{
						title: '收货地址',
						icon: 'location',
						color: '#19be6b',
						path: '/pages/address/list'
					},
					{
						title: '客服中心',
						icon: 'headphones',
						color: '#007aff',
						path: '/pages/service/contact'
					},
					{
						title: '关于我们',
						icon: 'info',
						color: '#8a8a8a',
						path: '/pages/about/index'
					}
				]
			}
		},
		computed: {
			isLogin() {
				return !!this.userInfo.username
			},
			...mapState('userAbout',['userInfo'])
		},
		onShow() {
			// this.loadUserInfo()
		},
		methods: {
			...mapActions('userAbout',{clearUser:'clearUser'}),
			...mapActions('cartAbout',{clearCart:'clearCart'}),
			gotoLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			// 导航到指定页面
			navigateTo(path) {
				if (!this.isLogin && path !== '/pages/user/settings') {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					uni.navigateTo({
						url: '/pages/login/index'
					})
					return
				}
				uni.navigateTo({
					url: path
				})
			},

			// 更换头像
			changeAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0]
						// 这里应该上传图片到服务器
						this.userInfo.avatar = tempFilePath
						uni.showToast({
							title: '头像更新成功',
							icon: 'success'
						})
					}
				})
			},

			// 退出登录
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							this.$myRequest({
								url:'/api/user/logout',
							}).then((res)=>{
								if(res.data.code==200){
									// const nullUser = {
									// 	avatar: '',
									// 	username: '',
									// 	id: ''
									// }
									// const nullCart={
									// 	goodsCount: 0,
									// 	cartList: []
									// };
									// 清除store中的用户信息
									this.clearUser();
									this.clearCart();
							
									uni.showToast({
										title: '已退出登录',
										icon: 'success'
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.user-center {
		padding: 20rpx;
		background-color: #f7f7f7;
		min-height: 100vh;
	}

	.user-card {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		position: relative;
		margin-bottom: 20rpx;

		.user-avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			overflow: hidden;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.edit-avatar {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 40rpx;
				background-color: rgba(0, 0, 0, 0.5);
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.user-info {
			flex: 1;
			margin-left: 30rpx;
			display: flex;
			flex-direction: column;

			.username {
				color: red;
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.user-level {
				font-size: 24rpx;
				color: #ff9900;
				background-color: #fff8e6;
				padding: 4rpx 12rpx;
				border-radius: 20rpx;
				align-self: flex-start;
			}
		}

		.settings-btn {
			padding: 10rpx;
		}
	}

	.menu-list {
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		margin-bottom: 20rpx;

		.menu-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}

			.menu-left {
				display: flex;
				align-items: center;

				.menu-text {
					margin-left: 20rpx;
					font-size: 30rpx;
				}
			}
		}
	}

	.logout-btn {
		background-color: #fff;
		color: #ff5a5f;
		text-align: center;
		padding: 30rpx;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: bold;
	}
</style>
